<template>
  <el-dialog v-model="visible" :title="title" width="30%" :before-close="close">

    <el-form :model="editData" ref="form" label-width="100px" :rules="rules">

      <el-row>
        <el-col :span="11">
          <el-form-item label="亲密度:" prop="min">
            <el-input-number v-model="editData.min" :step="1" :min="0" :precision="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span class="vis">~</span>
        </el-col>
        <el-col :span="11">
          <el-form-item label="" prop="max" label-width="0">
            <el-input-number v-model="editData.max" :step="1" :min="Number(editData.min)+1" :precision="0"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="消息条数:" prop="dictValue">
        <el-input-number v-model="editData.dictValue" :step="1" :min="1" :precision="0"/>
      </el-form-item>

    </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="mainFn.submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {computed, reactive, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import {insertIntimacyConfig} from "../../../api/intimacyConfig";

export default {
  name: "packagePriceAddOrUpdate",
  props: {
    visible: false,
    editData: {},
    title: '',
  },
  setup(props, {emit}) {
    const visible = computed(() => {
      return props.visible
    })
    const editData = computed(() => {
      return props.editData
    })
    let title = computed(() => {
      return props.editData?.id ? '编辑' : '新增'
    })

    const form = ref(null);
    const rules = reactive({
      dictValue: [
        {required: true, message: '请输入发送消息条数', trigger: 'blur'},
      ],
      min: [
        {required: true, message: '请输入最小亲密度', trigger: 'blur'},
      ],
      max: [
        {required: true, message: '请输入最大亲密度', trigger: 'blur'},
      ],
    })
    watch(visible, (newVal, oldVal) => {
      if (newVal) {
        if (props.editData.dictLabel) {
          let data = props.editData.dictLabel.split("~")
          props.editData.dictValue = Number(props.editData.dictValue)
          props.editData.min = Number(data[0])
          props.editData.max = Number(data[1])
        }
      }
    });

    const close = () => {
      emit("close");
      emit("reload")
      form.value.resetFields();
    }

    const {$fn: mainFn} = addOrUpdateFun(form, props, close);

    return {visible, editData, title, rules, close, form, mainFn}
  }
}

function addOrUpdateFun(form, props, close) {
  const $fn = {
    submit() {
      form.value.validate((v) => {
        if (v) {
          insertIntimacyConfig(props.editData).then(row => {
            if (row.code === 0) {
              ElMessage.success("操作成功！");
              close();
            }
          }).catch(() => close())
        }
      })
    },
  }
  return {$fn}
}

</script>
<style scoped>
/deep/ .vis {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
</style>
